<template>
  <div class="health-container">
    <!-- 导航栏 -->
    <header class="admin-header">

    </header>


    <!-- 主要内容改为卡片式布局 -->
    <main class="main-content">
      <div class="container">
        <h2>陪诊员审核</h2>
        <!-- 筛选状态 -->
        <div class="filter-section">
          <el-radio-group v-model="filterStatus" @change="fetchEscortList">
            <el-radio-button label="pending">待审核</el-radio-button>
            <el-radio-button label="approved">已通过</el-radio-button>
            <el-radio-button label="rejected">未通过</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 卡片列表 -->
        <div class="escort-cards">
          <div v-for="(escort, index) in escortList" :key="escort.id" class="escort-card">
            <div class="card-header">
              <h3>{{ escort.realName }} <span class="status-badge" :class="escort.status">{{
                  escort.status === 'pending' ? '待审核' :
                      escort.status === 'approved' ? '已通过' : '未通过'
                }}</span></h3>
              <div class="escort-id">ID: {{ escort.id }}</div>
            </div>

            <div class="card-body">
              <div class="info-row">
                <div class="info-item">
                  <span class="label">性别:</span>
                  <span class="value">{{ escort.gender === 'male' ? '男' : '女' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">年龄:</span>
                  <span class="value">{{ escort.age || '未填写' }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">身份证号:</span>
                  <span class="value">{{ escort.idCard }}</span>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <div class="info-item">
                    <span class="label">电话:</span>
                    <span class="value">{{ escort.phone }}</span>
                  </div>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <span class="label">服务次数:</span>
                  <span class="value">{{ escort.serviceCount }}</span>
                </div>
                <div class="info-item">
                  <span class="label">平均评分:</span>
                  <span class="value">{{ escort.avgRating }}</span>
                </div>
              </div>

              <div class="image-section">
                <!-- 头像显示 -->
                <div class="image-wrapper">
                  <span class="label">头像:</span>
                  <div class="image-container">
                    <el-image
                        v-if="isImageFile(escort.avatar)"
                        :src="escort.avatar"
                        :preview-src-list="[escort.avatar]"
                        fit="cover"
                        class="escort-image"
                    >
                      <template #error>
                        <div class="image-slot">
                          <el-icon><Picture /></el-icon>
                          <span>加载失败</span>
                        </div>
                      </template>
                      <template #placeholder>
                        <div class="image-slot">
                          <el-icon><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div v-else class="file-link">
                      <el-link :href="escort.avatar" target="_blank" type="primary">
                        <el-icon><Document /></el-icon>
                        查看头像文件
                      </el-link>
                    </div>
                  </div>
                </div>

                <!-- 资质证书显示 -->
                <div class="image-wrapper">
                  <span class="label">资质证书:</span>
                  <div class="image-container">
                    <el-image
                        v-if="isImageFile(escort.certificate)"
                        :src="escort.certificate"
                        :preview-src-list="[escort.certificate]"
                        fit="cover"
                        class="escort-image"
                    >
                      <template #error>
                        <div class="image-slot">
                          <el-icon><Picture /></el-icon>
                          <span>加载失败</span>
                        </div>
                      </template>
                      <template #placeholder>
                        <div class="image-slot">
                          <el-icon><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div v-else class="file-link">
                      <el-link :href="escort.certificate" target="_blank" type="primary">
                        <el-icon><Document /></el-icon>
                        查看资质证书
                      </el-link>
                    </div>
                  </div>
                </div>
              </div>

              <div class="info-row">
                <div class="info-item">
                  <div class="info-item">
                    <span class="label">个人简介:</span>
                    <span class="value">{{ escort.profile }}</span>
                  </div>
                </div>
              </div>

              <div class="audit-section" v-if="escort.status === 'pending'">
                <el-input
                    v-model="auditComments[index]"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入审核意见"
                    class="audit-comment"
                ></el-input>

                <div class="action-buttons">
                  <el-button
                      type="success"
                      @click="auditEscort(escort.id, 'approved', index)"
                      :loading="loadingMap[`approve-${escort.id}`]"
                  >
                    <el-icon><CircleCheck /></el-icon>
                    审核通过
                  </el-button>

                  <el-button
                      type="danger"
                      @click="auditEscort(escort.id, 'rejected', index)"
                      :loading="loadingMap[`reject-${escort.id}`]"
                  >
                    <el-icon><CircleClose /></el-icon>
                    审核不通过
                  </el-button>
                </div>
              </div>

              <div class="audit-info" v-else>
                <div class="audit-comment">
                  <span class="label">审核意见:</span>
                  <span class="value">{{ escort.auditComment || '无审核意见' }}</span>
                </div>
                <div class="audit-time">
                  <span class="label">审核时间:</span>
                  <span class="value">{{ formatDate(escort.auditTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <div v-if="escortList.length === 0" class="empty-state">
            <el-empty description="暂无待审核的陪诊员" />
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer style="background-color: #f5f7fa; padding: 20px 0; border-top: 1px solid #e6e6e6;">
      <div class="container">
        <div class="footer-content" style="text-align: center;">
          <p style="color: #666; margin-bottom: 10px;">安心陪诊后台管理系统</p>
          <p style="color: #999; font-size: 12px;">
            &copy; 2025 安心陪诊平台 版权所有 |
            <a href="#" @click.prevent="goToUserAgreement" style="color: #999;">用户协议</a> |
            <a href="#" @click.prevent="goToPrivacyPolicy" style="color: #999;">隐私政策</a>
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {CircleCheck, CircleClose} from '@element-plus/icons-vue';
import {Document} from '@element-plus/icons-vue';

const router = useRouter();

const managerInfo = ref({
  id: "",
  username: "",
  realName: "",
  phone: "",
  email: "",
  createTime: ""
});

const escortList = ref([
  {
    id: '',
    realName: '',
    password: '',
    gender: '',
    age: '',
    idCard: '',
    phone: '',
    avatar: '',
    serviceCount: '',
    avgRating: '',
    certificate: '',
    profile: '',
    status: '',
    auditComment: '',
    createTime: ''
  }
]);
const auditComments = ref([]);
const filterStatus = ref("pending");
const loadingMap = ref({});
const activeDropdown = ref(null);
const hoverTimeout = ref(null);
const loading = ref(true);


// 获取陪诊员信息
const fetchEscortList = async () => {
  try {
    // 改为使用params传递查询参数
    const response = await axios.get(BASE_URL + '/v1/manager/escort', {
      params: {
        status: filterStatus.value
      },
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('managerToken')}`
      }
    });

    if (response.data.state === 2000) {
      console.log(response.data.data);
      escortList.value = response.data.data;
      console.log(response.data.data);
      console.log("escortList.value");
      auditComments.value = new Array(escortList.value.length).fill("");
    } else {
      ElMessage.error(response.data.message || "获取陪诊员信息失败");
    }
  } catch (error) {
    console.error("获取陪诊员信息出错:", error);
    ElMessage.error(error.response?.data?.message || "获取陪诊员信息失败");
  }
};

// 审核陪诊员信息
const auditEscort = async (escortId, status, index) => {
  const loadingKey = `${status === 'approved' ? 'approve' : 'reject'}-${escortId}`;
  loadingMap.value[loadingKey] = true;

  try {
    const auditComment = auditComments.value[index] || null; // 改为null而不是空字符串

    const response = await axios.post(
        `${BASE_URL}/v1/manager/audit`,
        null,
        {
          params: {
            escortId,
            status,
            auditComment
          },
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('managerToken')}`
          }
        }
    );

    if (response.data.state === 2000) {
      ElMessage.success(status === 'approved' ? '审核通过成功' : '审核拒绝成功');
      await fetchEscortList();
    } else {
      ElMessage.error(response.data.message || "审核操作失败");
    }
  } catch (error) {
    console.error("审核陪诊员信息出错:", error);
    ElMessage.error(error.response?.data?.message || "审核陪诊员信息失败");
  } finally {
    loadingMap.value[loadingKey] = false;
  }
};


// 判断是否为图片文件
const isImageFile = (url) => {
  if (!url) return false;
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
  return imageExtensions.some(ext => url.toLowerCase().endsWith(ext));
};


const goToUserAgreement = () => {
  router.push("/userAgreement");
};

const goToPrivacyPolicy = () => {
  router.push("/privacyPolicy");
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return "未知时间";
  const date = new Date(dateString);
  return date.toLocaleString();
};

onMounted(() => {
  fetchEscortList();
});
</script>


<style scoped>
.health-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
}

.admin-header {
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-content {
  flex: 1;
  padding: 30px 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 25px;
}

h2 {
  font-size: 24px;
  color: #1a365d;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

/* 筛选区域样式 */
.filter-section {
  background: white;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}

/* 卡片容器 */
.escort-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

/* 卡片样式 */
.escort-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.escort-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e0;
}

.card-header {
  padding: 18px 25px;
  background-color: #f7fafc;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2d3748;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 12px;
  color: white;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.status-badge.pending {
  background-color: #ed8936;
}

.status-badge.approved {
  background-color: #48bb78;
}

.status-badge.rejected {
  background-color: #f56565;
}

.escort-id {
  font-size: 13px;
  color: #718096;
  background: #edf2f7;
  padding: 3px 8px;
  border-radius: 10px;
}

.card-body {
  padding: 25px;
}

.info-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.label {
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 6px;
  font-size: 14px;
}

.value {
  color: #2d3748;
  font-size: 15px;
  word-break: break-word;
}

/* 修改图片区域样式 */
.image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
  min-height: 250px; /* 增加最小高度 */
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%; /* 使容器充满可用高度 */
}

.image-container {
  position: relative;
  width: 100%;
  height: 280px; /* 增加图片容器高度 */
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e0;
  display: flex;
  flex-direction: column;
}

.escort-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 改为contain以完整显示图片 */
  transition: transform 0.3s ease;
  flex-grow: 1; /* 使图片占据剩余空间 */
}

.image-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #718096;
  font-size: 14px;
  flex-grow: 1;
}

.image-slot .el-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.file-link {
  margin-top: 8px;
  text-align: center;
  padding: 10px;
}

/* 调整卡片布局以适应更高的图片 */
.escort-card {
  display: flex;
  flex-direction: column;
  height: auto; /* 改为自动高度以适应内容 */
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .image-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .image-container {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .image-container {
    height: 180px;
  }
}

/* 审核区域样式 */
.audit-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.audit-comment {
  margin-bottom: 15px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.audit-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}

.audit-info .label {
  font-weight: 600;
}

/* 空状态样式 */
.empty-state {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .escort-cards {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

@media (max-width: 992px) {
  .container {
    padding: 0 20px;
  }

  .escort-cards {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .escort-cards {
    grid-template-columns: 1fr;
  }

  .info-row {
    grid-template-columns: 1fr;
  }

  .image-section {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 20px;
  }

  .container {
    padding: 0 15px;
  }

  .card-body {
    padding: 20px 15px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .escort-id {
    align-self: flex-start;
  }
}

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

body {
  background-color: #f8fafc;
  color: #2d3748;
  line-height: 1.6;
}

/* 按钮样式调整 */
.el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all 0.2s;
}

/* 通过按钮 */
.el-button--success {
  background-color: #5CB85C;
  border-color: #5CB85C;
  color: white;
}

.el-button--success:hover {
  background-color: #4CAE4C;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(92, 184, 92, 0.3);
}

/* 拒绝按钮 */
.el-button--danger {
  background-color: #FF6B6B;
  border-color: #FF6B6B;
  color: white;
}

.el-button--danger:hover {
  background-color: #E05555;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 文本域样式调整 */
.audit-comment :deep(.el-textarea__inner) {
  min-height: 80px;
  border-radius: 8px;
  padding: 12px;
}
</style>